import {BookFilled} from "@ant-design/icons";
import {Card, Col, Row,Image} from "antd";
import styles from "./index.less"
import {useState} from "react";

export default ()=>{
  const [activeTab, setActiveTab] = useState<number>(0);
  return (
    <Card size='small' className={styles.top} styles={{
      body: {
        display: "flex",
        justifyContent: "space-between",
        height:3*75,
      }
    }}>
      <div className={styles.topLeft}>
        <a className={activeTab===0?styles.active:''} onClick={()=>setActiveTab(0)}>
          <BookFilled className={styles.icon} />
          <span style={{fontSize:12,color:'#6c757d'}}>AI快讯</span>
        </a>
        <a className={activeTab===1?styles.active:''} onClick={()=>setActiveTab(1)}>
          <BookFilled className={styles.icon}/>
          <span style={{fontSize:12,color:'#6c757d'}}>AI项目</span>
        </a>
        <a className={activeTab===2?styles.active:''} onClick={()=>setActiveTab(2)}>
          <BookFilled className={styles.icon}/>
          <span style={{fontSize:12,color:'#6c757d'}}>AI百科</span>
        </a>
      </div>
      <Row gutter={16} className={styles.topRight}>
        {
          ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',].map((_,index)=>(
            <Col span={4} style={{position:'relative',padding:8}} key={index}>
              <a>
                <Image style={{transition:'0.5s', borderRadius:8,}} preview={false} src='https://ai-bot.cn/wp-content/uploads/2024/12/Digital-Twin.png' />
                <div className={styles.tips}>
                  <span style={{color:'#eee',fontSize:14}}>上下文工程是什么？一文读懂 – AI百科知识</span>
                </div>
              </a>
            </Col>
          ))
        }
      </Row>
    </Card>
  )
}
